html, body{
   scroll-behavior: smooth;
}

.header{
  margin: 0;
  border:0em;
  border-radius: 0;
  padding-top: 25px;
  
  background: #111111;

 .logo{
    text-transform: uppercase;
     font-family: OSLight;
     font-size: 1.5em;
     padding: 20px 15px;
     color: #fff;

       }

 .nav li a{
    text-transform: uppercase;
    padding: 20px 15px;
    transition: all linear .2s;
    border-bottom:3px solid transparent;
    color :#fff;

    &:hover{
       
       border-bottom:3px solid #292929
           }
        
          }         

@media screen and  (max-width:767.2px) {
  /*padding-bottom: 12.4px;*/
  .nav li a{
          text-align:center;
          }
        
}

}
.banner{
  background: #111111;
  text-align:center;
  padding-top: 10em;
  padding-bottom: 9em;
  height: 668px;

.title{
  text-transform: uppercase;
  font-family: OSLight;
  font-size: 3em;
  color: #999999;
  span {
    font-family: OSBold;
    color: #fcac45;
  }
}

.content{
  font-family: OSLight;
  font-size: 1.4em;
  color: #fff;
  margin-bottom: 13em;
  span {
    font-family: OSBold;
 }
}

 @media screen and  (max-width:748px) {
  .content{
          font-size: 1em;
          }
}

 .circle{
  color: #fff;
  border: 2px solid #fff;
  width: 2.5em;
  height: 2.5em;
  line-height: 2em;
  text-align:center;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 1em;
  transition: all linear .2s;
   
  &:hover{
       transform: translateY(-10px);
       box-shadow: 0px 5px 20px 1px #fff;
           }
 }
}

.ABOUT{
  background: #fff;
   padding-top: 8em;
  padding-bottom: 4em;

 .container{
   display: flex;
   padding: 0;
   justify-content: space-between;
   flex-wrap: nowrap; 
   align-items:stretch;
   align-content: stretch;
   .left{
     width:55%;
     flex-shrink: 0;
     margin-left: 4em;
    }
   .right{
     
     .title{
       margin-top: -1em;
       margin-bottom: 1.2em;
       .top{
         color:#636363;
         text-transform: uppercase;
         font-family: OSLight;
         font-size: 1.5em;
        }
       .bottom{
           margin-top: -.5em;
           color:#111111;
           text-transform: uppercase;
           font-family: OSLight;
           font-size: 2.5em;
           

           span:first-of-type{   
             padding-bottom: 6px;
             line-height: 2em;
             border-bottom: 4px solid #fcac45;   
            }
          
           span:last-of-type{
             font-family: OSBold;
            }
          } 
          }
      
     .content{
        color:#636363;
        font-family: OSLight;
        font-size: 1.3em;
        margin-bottom: 1.2em;
        
      }
     .list{
       color:#636363;
       font-family: OSLtalic;    
       font-size: 1.2em;
       
       margin-bottom: 2em;
       li{
        margin-bottom: .3em;
        span:first-of-type{
         top:1.5px;
        }
        span:last-of-type{
           margin-left: .3em;
           font-family:OSBold;
          }
        }
      }
      .more{
        color: #7f7f7f;
        border: 1px solid #7f7f7f;
        border-radius: 3px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        padding: 1em .5em;
        width:45%;
        cursor: pointer;
        transition:all linear .3s ;
        &:hover{
           transform: translateY(-10px);
           box-shadow: 0px 5px 20px 1px #7f7f7f;
           }
        span:first-of-type{
          top:0px;
        }
        span:last-of-type{
          text-transform: uppercase;
          font-size: .9em;
          font-family:OSLight;
          margin-left: 10px;
        }
      }
    }
  }

  @media screen and (max-width:1000px){
    .container{
      display: block;
      .left{
        display: none;
      }
      .right{
        width: 100%;
        .more{
        
        }
      }
    }
  }
}
.team{
   width: 100%;
   background: #111111;
   padding-top: 6em;
   padding-bottom: 4em;
   color: #fff;
   .title{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     font-family:OSBold;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: 1em;
     margin-bottom: 2em ;
     span{
       font-family: OSLight;
     }
   }
   .list{
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-around;
     align-items:stretch ;
     align-content: stretch;
     margin-bottom: 7em;
     .item{
       width:23%;
    .avatar{
       width: 50%;
       margin:0 auto;
       border-radius: 100%;
       overflow: hidden;
       margin-bottom: 2em;
    }
    .box{
       text-align: center;
       .name{
         font-family: OSBold;
         font-size: 1.5em;
       }
       .job{
         font-family: OSLight;
         font-size: 1.2em;
         margin-bottom: 1em;
       }
       .content{
         font-size: 1em;
       }
    }
    }
   }
   .more{
     width: 100%;
     text-align: center;
     span{
       display: inline-block;
       width: 1em;
       height: 1em;
       background: #fff;
       transition: all linear.3s;
       cursor: pointer;
       margin-right: 10px;
       &:hover{
          background: #fcac45;
       }
     }
   }
  
   @media screen and (max-width:600px) {
     .list{
       flex-wrap: wrap;
       .item{
          width: 100%;
          display:flex;
          align-items: stretch;
          align-content: stretch;
          justify-content: flex-start;
          margin-bottom: 2em;
          .avatar{
           
           margin-bottom: 0%;
           margin-right: 1em;
           
       }
       }
       
     }
   }
}
.service{
   width: 100%;
   padding-top: 6em;
   padding-bottom: 4em;
   .title{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     font-family:OSLight;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: 1em;
     margin-bottom: 1em ;
      span{
       font-family: OSBold;
     }
    }
   .content{
     text-align: center;
     font-size:1em ;
     font-family:OSLight;
     margin-bottom: 10em;
   }
    .list{
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-around;
     align-items:stretch ;
     align-content: stretch;
     margin-bottom: 7em;
     .item{
       width:20%;
       .pic{
         text-align: center;
         width: 50%;
         aspect-ratio: 1 / 1;
         margin:0 auto;
         border-radius: 100%;
         overflow: hidden;
         border: 5px solid #fcac45;
         img {
           width: 100%;
            height: 100%;
           object-fit: cover; 
            display: block;

          }
        }
       .box{
         text-align: center;
        
         .device{
           font-family: OSBold;
           text-transform: uppercase;
           font-size: 1.8em;
           margin-bottom: .2em;
           
       }       
         .content{
           font-size: 1em;
          }
    }
    }
   }
   
   @media screen and (max-width:995px) {
     .list{
       flex-wrap: wrap;
       .item{
        width: 50%; 
      }          
       }
       }  
     }
.portfolio{
   width: 100%;
   background: #111111;
   padding-top: 6em;
   padding-bottom: 4em;
   color: #fff;
   .title{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     font-family:OSBold;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: 1em;
     margin-bottom: 2em ;
     span{
       font-family: OSLight;
     }
    }
   .list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;  
    text-align: center;   
    margin-bottom: 10em;
     .item{
       width:19%;
      
      }
           
   }
    .more{
     width: 100%;
     text-align: center;
     span{
       display: inline-block;
       width: 1em;
       height: 1em;
       background: #fff;
       transition: all linear.3s;
       cursor: pointer;
       margin-right: 10px;
       &:hover{
          background: #fcac45;
       }
     }
   }
   @media screen and (max-width:1220px) {
     .list{
       flex-wrap: wrap;
       .sen{
          width: 100%;
          text-align:center;
           }
         }
  }
}
.work{
   width: 100%;
   padding-top: 6em;
   padding-bottom: 4em;
   .title{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     font-family:OSBold;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: .6em;
     margin-bottom: 1em ;
     span{
       font-family: OSLight;
     }
   }
   .desc{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2em;
    font-family: OSLight;
    line-height: 1.5em;
    margin-bottom: 5em;
   }
   .box{

     .top{
       display: flex;
       justify-content: space-between;
       align-items: center;
       align-content: center;
       margin-bottom:1em ;

      .left{
        text-transform: uppercase;
        font-family: OSBold;
        font-size: 1.2em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .right{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        a{
          display: inline-block;
         padding: 0em 1em;
         border-right: 1px solid #111111;
         text-transform: uppercase;
         font-family: OSLight;
         font-size: 1.2em;
         color: #999999;
         transition: all linear .3s;
        }

        a:hover{
          transform:translateY(-10px) ;
          text-shadow: 0px 10px 10px  #7f7f7f;
        }
      a:last-child{
         border-right: 0px;
         padding-right: 0px;
      }
    }
      .menu{
        display: none;
      }
     }
     .list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .item{

        width:24%;
        position: relative;
        overflow: hidden;
        margin-bottom: 1em;
        cursor: pointer;
        img{
          width: 100%;
        }

        .mask{
          background: #111111;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top:-100%;
          overflow: hidden;
          text-align: center;
           transition: all linear .3s;
          .name{
            color: #fff;
            font-size: 1.2em;
            font-family: OSBold;
            width: 100%;
            text-align: center;
            margin-top: 2em;
            margin-bottom: .2em;
            text-transform: uppercase;
           
          }
          .desc{
             color: #7f7f7f;
             font-size: 1em;
             width: 100%;
             text-align: center;
             margin-bottom: .8em;
          }
          .plus{
            color: #fcac45;
            font-size: 2em;
            display: inline-block;
            width: 1.5em;
            height: 1.5em;
            border: 1px solid #fcac45;
            border-radius: 100%;
            overflow: hidden;
            margin:0 auto;
            text-align: center;
          }

        }

        &:hover .mask{
          top:0%;
        }
      }
     }
   }
   @media screen and (max-width:1000px) {
      .box .list .item .mask .name{
        font-size: 1em;
      }
      .box .list .item .mask  .desc{
        font-size: .8em;
      }
      }
   @media screen and (max-width:600px) {     
     .box .top .right{
       display: none;
      }
    .box .top .menu{
       display: inline-block;
      }
     
    
    .box .list .item{
      width: 32%;
    }
  }
   @media screen and (max-width:500px) {   
      .title{
        font-size: 2em;
        padding-bottom:1em ;
      }  
      .desc{
        font-size: 1em;
      }
    
    .box .list .item{
      width: 49%;
    }
  }
   }
.testimonial{
   width: 100%;
   background: #111111;
   padding-top: 6em;
   padding-bottom: 4em;
   color: #fff;
   font-family:OSLight;
  .title{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: .8em;
     margin-bottom: 1.5em ;
     span{
       font-family: OSBold;
     }
    }
  .content{
     width: 75%;
     margin: 0 auto;
     text-align: center;
     font-size: 1.2em;
     line-height: 1.5em;
     margin-bottom: 2em;
   }
   .end{
     color:#999999;
     width: 75%;
     margin: 0 auto;
     text-align: center;
     font-size: 1.2em;
     line-height: 1.5em;
     margin-bottom: 5em;
   }
   .more{
     width: 100%;
     text-align: center;
     span{
       display: inline-block;
       width: 1em;
       height: 1em;
       background: #fff;
       transition: all linear.3s;
       cursor: pointer;
       margin-right: 10px;
       &:hover{
          background: #fcac45;
       }
     }
}
}
.contact{
   width: 100%;
   padding:5em 0em 2em;
   overflow: hidden;
   font-family:OSLight;
   .top{
     width: 100%;
     text-align: center;
     font-size:3.5em ;
     text-transform: uppercase;
     background:url('../image/title-background.png')no-repeat center bottom;
     padding-bottom: .8em;
     margin-bottom: 1.5em ;
     span{
       font-family: OSBold;
     }
    }
  .content{
     width: 75%;
     margin: 0 auto;
     text-align: center;
     font-size: 1.2em;
     line-height: 1.5em;
     margin-bottom: 2em;
  }
   .box{
     width: 100%;
     .info{
         width: 100% ;
         display: flex;
         justify-content: space-between;
         align-items: stretch;
         flex-wrap: nowrap;
         margin-bottom:2em ;
         .item{
           width:49% ;
           display: flex;
           flex-wrap: wrap;
           text-align: left;
           
           div,input{
             width: 100%;
             text-align: left;
           }
           .title{
             font-size:1em ;
             font-family: OSLight;
             padding-left: 0px;
             sup{
               color: red;
             }
           }
           input{
            height: 3em;
            line-height: 3em;
            border: 1px solid #7f7f7f;
            font-size: 1.2em;
            text-indent:.5em ;
           }
         }
      }
     .message{
       width: 100%;    
       margin-bottom: 2.5em;
       div,textarea{
         width: 100%;
         
         display: block;
       }
       .title{
         font-size:1em ;
         font-family: OSLight;
         padding-left: 0px;
         text-align: left;
         sup{
          color: red;
          }
        }
       textarea{
            border: 1px solid #7f7f7f;
            font-size: 1.2em;
            text-align: left;
           }
      }
      .button{
         width: 100%;
         text-align: right;
         button{
          width:20% ;
          border:0px;
          background: #fcac45;
          color: #fff;
          font-size: 1.5em;
          text-transform: uppercase;
          text-align: center;
          padding: .3em 0em;
          transition: all linear .3s;
          font-weight:bold;
          &:hover{
             transform: translateY(-10px);
             box-shadow: 0px 10px 10px 5px #111111;
          }
         }
      }
    }
    @media screen and (max-width:600px){
      .box{
        width: 95%;
        margin: 0 auto;
        .info{
          flex-wrap: wrap;
          margin-bottom: 0px;
          .item{
             width: 100%;
             margin-bottom: 2em;
          }
        }
        .button{
          text-align: center;
          bottom{
            width: 40%;
          }
        }
      }
    }
}
footer{
  width: 100%;
  background: #111111;
  padding:3em 0em;
  overflow: hidden;
  color: #fff;

  .container{
     display: flex;
     justify-content: space-between;
     align-items: center;
     align-content: center;

     &::before,&::after{
      content:'' ;
      display: none;
     }
     .copyright{
         font-size: 1em;
         font-family: OSBold;
         color: #999999;
     }
     .link{
         width: 18%;
         display: flex;
         justify-content: space-around;
         align-items: center;
         align-content: center;
         .item{
               width: 2em;
               height: 2em;
               border: 3px solid #999999;
               border-radius: 100%;
               overflow: hidden;
               cursor: pointer;
               transition: all linear .3s;
               &:hover{
                 transform: translateY(-10px);
                 box-shadow: 0px 10px 10px 0px #fff;
               }
               img{
                   width: 100%;
               }
         
            
          }
         }
     }
      @media screen and (max-width: 800px){
          .container{
            flex-wrap: wrap;
            .copyright{
              width: 100%;
              text-align: center;
              margin-bottom:2em ;
            }
            .link{
              width: 100%;
            
             
        }
          }
      }
  }


   
  
 

   
   